根据udacity课程学习的笔记。

教程和文档

Google Maps JavaScript API V3 Reference

1. 方向API

是一项计算位置间路线的服务。您可以搜索包括公共交通、驾车、步行或骑行在内的几种交通模式的路线。

Google Maps Directions API

方向服务

https://maps.googleapis.com/maps/api/directions/json?origin=75+9th+Ave+New+York,+NY&destination=MetLife+Stadium+1+MetLife+Stadium+Dr+East+Rutherford,+NJ+07073&waypoints=optimize:true|Providence,+RI|Hartford,+CT&mode=transit&arrival_time=1391374800&departure_time=1541202457&traffic_model=best_guess&key=YOUR_API_KEY

1
2
3
4
5
6
7
//添加一个按钮指向新函数displayDirections( origins[i])
//传入起点是列出的地址，使用的终点是用户输入地址
var infowindow = new google.maps.InfoWindow({
  content:durationText+'away,'+distanceText+
  '<div><input type=\"button\" value=\"View Route\" onclick =' +
  '\"displayDirections(&quot;' + origins[i] + '&quot;);\"></input></div>'
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//计算实际方向并在地图上显示路线
function displayDirections(origin) {
  hideListings();
  //初始化新实例
  var directionsService = new google.maps.DirectionsService;
  //重新捕获用户输入终点和出行模式
  var destinationAddress =document.getElementById('search-within-time-text').value;
  var mode = document.getElementById('mode').value;
  //计算路线，传入起点，终点，出行模式
  directionsService.route({
    // The origin is the passed in marker's position.
    origin: origin,
    // The destination is user entered address.
    destination: destinationAddress,
    travelMode: google.maps.TravelMode[mode]
  },function (response, status) {
    //获得响应后确保状态为OK
    if (status === google.maps.DirectionsStatus.OK) {
      //此渲染器负责显示信息，在地图上显示最终的折线
      var directionsDisplay = new google.maps.DirectionsRenderer({
        //指定地图
        map: map,
        //从路线响应中获取方向
        directions: response,
        //路线可移动
        draggable: true,
        //路线绿色
        polylineOptions: {
          strokeColor: 'green'
        }
      });
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

2. 距离矩阵和方向API注意点

距离矩阵 API 请求 通过组合使用 ORIGIN、DESTINATION 和 TRAVELMODE 发出。在发出请求时，请注意以下几点：

  • 无论选择何种出行方式，每个请求最多可以传入 25 个 起点或者 25 个终点，但元素最多仅限 100 个， 且元素个数 =起点数*终点数。例如，10 个起点和 10 个 终点 = 100 个元素。在使用 Web 服务的情况下， 对于高级计划客户，此值最大可达到 625。
  • 虽然大多数其他服务受速率限制（每秒查询数不超过 50）， 但距离矩阵 API 在元素（而非查询）方面受到 速率 限制。如果某时间段内请求的元素数目 过多，将返回 OVER_QUERY_LIMIT 响应 代码。
  • 某些参数仅适用于特定出行方式， 例如：
    • 如果出行方式为 transit，则将忽略 AvoidTolls 和 AvoidHighways
    • 仅当出行方式为 transit 时，所有 TransitOptions 才有效
    • departureTime 可在传递DrivingOptions 或 TransitOptions 参数时进行传递

方向 API 请求 也涉及 ORIGIN、DESTINATION 和 TRAVELMODE，但还具有可选 参数 WAYPOINTS 或 VIA points。在发出请求时， 请注意以下几点：

  • 对于客户端方向服务（使用 Javascript API）， 除起点和终点外，最多可指定 8 个 途经点/请求 ，即每个请求 共 10个地理编码点。对于 高级计划 客户，这一限值由 8 增加至 23
  • 对于 Web 服务，只要提供 API 密钥等有效标识符， 即可为每个请求指定最多 23 个途经点。如果超出限制， 响应 代码将给出相应指示。
  • TRANSIT 出行方式不支持途经点

3. 道路API

通过 Google Maps Roads API 追踪 GPS 面包屑导航轨迹，以绘制车辆行驶的道路地图和确定这些路段沿线的速度限制。
标识车辆行驶的道路，并提供有关这些道路的附加元数据（如速度限制）。

Google Maps Roads API

Google Maps Roads API 检查器
用自定义点测试道路吸附请求

4. 地点自动完成

加载地点库

1
2
3
<!-- 用于异步加载API -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=输入key&libraries=places,drawing,geometry&v=3&callback=initMap">
</script>

1
2
3
4
5
6
<hr>
<div>
  <span class="text">search for nearby places</span>
  <input type="text" id="places-search" placeholder="Ex: 电子科技大学邮政代办所">
  <input type="button" id="go-places" value="Go">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//把地点自动完成实例绑定到文本输入框
var timeAutocomplete = new google.maps.places.Autocomplete(
  document.getElementById('search-within-time-text')
);
var zoomAutocomplete = new google.maps.places.Autocomplete(
  document.getElementById('zoom-to-area-text')
);
//添加边界限制为地图范围内
zoomAutocomplete.bindTo('bounds',map);
      //创建一个文本搜索框
var searchBox = new google.maps.places.SearchBox(
  document.getElementById('places-search')
);
//搜索框范围限制在地图内
searchBox.setBounds(map.getBounds());
1
2
3
4
5
6
7
// 监听用户从选项列表中选择一个选项
// 即地点变化事件
searchBox.addListener('places_changed', function() {
  searchBoxPlaces(this);
});
// 监听用户输入并点击go按钮，而未选择建议选项的情况
document.getElementById('go-places').addEventListener('click', textSearchPlaces);
1
2
//创建一个全局地点标记数组
var placeMarkers =[];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
//当用户输入一个值时将获得普通查询词条
//用户选择搜索栏提供选项时
function searchBoxPlaces(searchBox) {
  //隐藏上次搜索中的任何地点标记
  hideMarkers(placeMarkers);
  //找到匹配查询词条的所有地点
  var places = searchBox.getPlaces();
  // For each place, get the icon, name and location.
  createMarkersForPlaces(places);
  if (places.length == 0) {
    window.alert('We did not find any places matching that search!');
  }
}

// 此函数在用户输入查询词条或位置并点击go按钮时执行
function textSearchPlaces() {
  //捕捉地图界限
  var bounds = map.getBounds();
  //隐藏上次搜索中的任何地点标记
  hideMarkers(placeMarkers);
  //创建新的地点服务实例
  var placesService = new google.maps.places.PlacesService(map);
  //传入用户输入的查询词条和地图界限
  placesService.textSearch({
    query: document.getElementById('places-search').value,
    bounds: bounds
  }, function(results, status) {
    //返回的结果（地点数组）状态OK
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      createMarkersForPlaces(results);
    }
  });
}

// 遍历地点数组并为它们创建标记
function createMarkersForPlaces(places) {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < places.length; i++) {
    var place = places[i];
    var icon = {
      url: place.icon,
      size: new google.maps.Size(35, 35),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(15, 34),
      scaledSize: new google.maps.Size(25, 25)
    };
    // Create a marker for each place.
    var marker = new google.maps.Marker({
      map: map,
      icon: icon,
      title: place.name,
      position: place.geometry.location,
      id: place.id
    });
    // If a marker is clicked, do a place details search on it in the next function.
    marker.addListener('click', function() {
    getPlacesDetails(this, place);
    });
    //将创建的每个标记放入placeMarkers数组
    placeMarkers.push(marker);
    //调节地图平衡并使它适当放入返回的所有地点标记
    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  }
  map.fitBounds(bounds);
}

5. 地点详情

Places API Web Service

https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=YOUR_API_KEY

1
2
3
4
5
6
7
8
9
10
11
12
13
//function createMarkersForPlaces(places) 中添加
    //在每个不同地点标记间创造信息窗口显示地点详情
    var placeInfoWindow = new google.maps.InfoWindow();
    // marker.addListener('click', function() {
    // getPlacesDetails(this, place);
    // });
    marker.addListener('click', function() {
      if (placeInfoWindow.marker == this) {
        console.log("This infowindow already is on this marker!");
      } else {
        getPlacesDetails(this, placeInfoWindow);
      }
    });

6. 地点 API 请求

附近搜索
附近搜索以前称为“地点搜索”， 是在某指定范围内搜索地点的最简单方式。可以指定 圆心和半径，划定搜索范围。附近搜索 默认返回含 20 个地点的列表，如具有高级计划许可，可返回含 60 个地点的列表。

文本搜索
文本搜索允许用户或系统使用文本查询执行地点搜索， 而无需指定位置。此搜索还可以 通过传递位置信息，设置搜索倾向。

雷达搜索
雷达搜索允许用户指定与附近搜索相同的参数， 可以返回 200 条结果，而不是 20 条， 但是返回数据有限。

在所有搜索中，都可以将 next_page_token 的值传递到 新搜索的 pagetoken 参数中，以查看 下一组结果。如果 next_page_token 为空，或未返回， 则说明不存在更多结果。

下面列出了必需参数和可选参数， 以及能够与这些参数配合使用的搜索方法。

地点 API 请求1
地点 API 请求2
地点 API 请求3

7. 时区API

Time Zone API

Google Maps Time Zone API 提供地球表明各位置的时间偏移数据。您可以请求特定纬度/经度对和日期的时区信息。该 API 将返回该时区的名称、与协调世界时的时间偏移以及夏令时偏移。
您可以通过 HTTPS 接口访问 Google Maps Time Zone API。

https://maps.googleapis.com/maps/api/timezone/json?location=30.310597,120.343251&timestamp=1331161200&key=输入key

timestamp=1331161200表示单位为秒的时间戳
UTC协调世界时，格林尼治标准时间

1
2
3
4
5
6
7
{
   "dstOffset" : 0,
   "rawOffset" : 28800,
   "status" : "OK",
   "timeZoneId" : "Asia/Shanghai",
   "timeZoneName" : "China Standard Time"
}

dstOffset: 夏令时偏移
rawOffset: UTC偏移28800s即8h